<style>
  #myChart:hover {
    animationduration: 0;
  }
</style>
<script src="https://how2j.cn/study/js/chartjs/2.8.0/chart.min.js"></script>
最大值：<input type="text" id="max" value="10" /> 最小值：<input
  type="text"
  id="min"
  value="1"
/>
数量：<input type="text" id="num" value="10" />
排序：
<select name="select" id="select">
  <option value="minmax">从小到大</option>
  <option value="maxmin">从da到小</option>
</select>
<button id="go">生成</button>
<br />

<div style="width: 400px; margin: 0px auto">
  <canvas id="myChart"></canvas>
</div>

<script>
  var label = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  var mydata = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  let button1 = document.getElementById("go");

  button1.onclick = function () {
    mydata = [];
    label = [];
    var min = +document.getElementById("min").value;
    var max = +document.getElementById("max").value;
    var nums = +document.getElementById("num").value; //获取数据
    var select = document.getElementById("select").selectedIndex; //获取数据
    
    
    var average = ((max - min) / (nums - 1));
    console.log(max +'--'+ min+'-'+nums);
    
    console.log(average);
    for (let i = 1; i <= nums; i++) {
      label.push(i);
      mydata.push(min + average * (i - 1));
      
      
    }
    if (select) mydata.reverse();

    var ctx = document.getElementById("myChart").getContext("2d");
    var myChart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: label,
        datasets: [
          {
            label: "示例",
            data: mydata,
            borderColor: "blue",
            backgroundColor: "skyBlue",
            borderWidth: 1,
          },
        ],
      },
    });
  };
  console.log(label);
</script>
